<template>
    <el-card shadow="never" class="page_card" :body-style="{ padding: '0' }">
        <el-radio-group v-model="activeName" type="card" @tab-click="handleClick">
            <el-radio-button :label="$t('order.tableTabs.Single') + '(12)'" name="1"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.Combine') + '(20)'" name="2"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.Note')" name="3"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.Unpaid')" name="4"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.UnreadMsg')" name="5"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.MarginCtr')" name="6"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.OutofStock')" name="7"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.RestockNow')" name="8"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.InventoryCtr')" name="9"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.Reprice')" name="10"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.Move')" name="11"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.Ready2Post')" name="12"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.Dispatched')" name="13"></el-radio-button>
            <el-radio-button :label="$t('order.tableTabs.Tracking')" name="14"></el-radio-button>
        </el-radio-group>

        <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>

            <el-table-column label="Ebay account/site/status/sub/feedback" prop="id" width="130">
                <template slot-scope="scope">
                    <div>gadgets.cloud</div>
                    <input type="text" value="待审gu">
                </template>
            </el-table-column>

            <el-table-column label="timestamps" width="160">
                <template slot-scope="scope">
                    <el-tag type="success" effect="dark" size="mini">
                        付款 2020-09-09 16:49
                    </el-tag>
                    <el-tag class="mt5" type="success" effect="dark" size="mini">
                        出单 2020-09-09 16:49
                    </el-tag>
                    <div>
                        <el-tag class="mt5" type="danger" effect="dark" size="mini">
                            未出仓
                        </el-tag>
                    </div>

                    <el-tag class="mt5" type="danger" effect="dark" size="mini">
                        未上传
                    </el-tag>

                </template>
            </el-table-column>

            <el-table-column label="Photo/stock" width="130">
                <template slot-scope="scope">
                    <img src="https://s1.ax1x.com/2020/10/04/0JApa4.png" alt="0JApa4.png" border="0" />
                    <div class="dflex" style="justify-content: unset;">
                        <span>Availbale</span>
                        <input class="ml5" type="text" value="11" style="width: 24px;">
                    </div>
                    <div>Inbound 100</div>
                    <div>Stock in ohoter sub</div>
                    <div>12 3 2 4 5</div>
                </template>
            </el-table-column>

            <el-table-column label="Title/Item#/userid/BuyerCountry/Sku/Qty" width="130">
                <template slot-scope="scope">
                    <div>
                        Replacement for logewroi asodpskapd kpasd
                    </div>
                </template>
            </el-table-column>

            <el-table-column width="250">
                <template slot-scope="scope">
                    <div class="dflex-uncenter">
                        <span>Qty</span>
                        <input class="ml5" type="text" value="11" style="width: 24px;">
                    </div>
                    <div class="dflex-uncenter">
                        <span>Unit</span>
                        <input class="ml5" type="text" value="f5.99" style="width: 50px;">
                    </div>
                    <div>p$p f 1.00</div>
                    <div>Total f6.99</div>
                    <div>USPS parcel Select</div>
                    <div>Ground</div>
                    <input type="text" value="TRACKING!@#@#!">
                </template>
            </el-table-column>

            <el-table-column width="250">
                <template slot-scope="scope">
                    <div>AfType(list)</div>
                    <input type="text" value="This is aftersales remark">
                </template>
            </el-table-column>

            <el-table-column width="250">
                <template slot-scope="scope">
                    <el-select placeholder="请选择" style="width: 100px;">
                        <el-option label="copy to repost" />
                        <el-option label="print post label" />
                        <el-option label="print Invoice" />
                        <el-option label="Edit product" />
                        <el-option label="Edit listing" />
                        <el-option label="Delete Order" />
                        <el-option label="Send message" />
                        <el-option label="Open resolution" />
                        <el-option label="View log" />
                    </el-select>

                </template>
            </el-table-column>

            <!-- expand expand expand expand-->
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-table :data="tableDataLv2" style="width: 100%" border :show-header="false">
                        <el-table-column width="55">

                        </el-table-column>

                        <el-table-column prop="id" width="130">
                            <template slot-scope="scope">
                                <h5 style="font-weight: 700;">Purchase Info</h5>
                                <div>采购价</div>
                                <div>供商(list)</div>
                                <div class="dflex-uncenter">
                                    <span>补货</span>
                                    <input class="ml5" type="text" value="50" style="width: 25px;">
                                </div>
                                <div class="dflex-uncenter">
                                    <span>跟单</span>
                                    <input class="ml5" type="text" value="50" style="width: 25px;">
                                </div>
                                <div class="dflex-uncenter">
                                    <span>调库</span>
                                    <input class="ml5" type="text" value="50" style="width: 25px;">
                                </div>
                                <div>年采 400(4次)</div>
                            </template>
                        </el-table-column>

                        <el-table-column label="timestamps" width="160">
                            <template slot-scope="scope">
                                <h5 style="font-weight: 700;">Inbound stock </h5>
                                <div>A721 20 (SENT)</div>
                                <div>/关途 25/关库</div>
                                <div>5/总 61</div>
                            </template>
                        </el-table-column>



                        <el-table-column label="Title/Item#/userid/BuyerCountry/Sku/Qty" width="130">
                            <template slot-scope="scope">
                                <h5 style="font-weight: 700;">Inventory control</h5>
                                <div>Local Sales /7/30days 2/12 Ema</div>
                                <div>Global Sales/7/30days2/12</div>
                                <div>Days of Supply 12</div>
                                <div>Suggested Restock 20</div>
                            </template>
                        </el-table-column>

                        <el-table-column width="130">
                            <template slot-scope="scope">
                                <h5 style="font-weight: 700;">Buyer Information</h5>
                                <div>Buyer address</div>
                                <div>Email</div>
                                <div>Buyer Information</div>
                            </template>
                        </el-table-column>

                        <el-table-column width="250">
                            <template slot-scope="scope">
                                <h5 style="font-weight: 700;">Repricing control</h5>
                                <div class="dflex-uncenter">
                                    <span>Suggested Price</span>
                                    <input class="ml5" type="text" value="F5.69" style="width: 25px;">
                                </div>
                                <div>Auto reprice setting</div>

                            </template>
                        </el-table-column>

                        <el-table-column width="250">
                            <template slot-scope="scope">
                                <h5 style="font-weight: 700;">Post Records</h5>
                                <input type="text" value="dd/mm/yy">
                                <input type="text" value="跟踪号码">
                                <input type="text" value="计费邮费">
                                <input type="text" value="计费重量">

                            </template>
                        </el-table-column>

                        <el-table-column>
                            <template slot-scope="scope">
                                <h5 style="font-weight: 700;">Cost Review</h5>
                                <div>Total:6.99</div>
                                <div>EBFee:1.00</div>
                                <div>PPFee:1.00</div>
                                <div>ShipInt:12</div>
                                <div>Shiplocal:1.00</div>
                                <div>Labor:1.00</div>
                                <div>VAT</div>
                                <div>Inc Tah</div>
                                <div>Net PF</div>
                                <div>TotalPF last 30</div>
                                <div>days:120</div>
                            </template>
                        </el-table-column>


                    </el-table>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination class="elPage" @size-change="handleSizeChange" :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
    </el-card>
</template>


<script>
    export default {
        data() {
            return {
                tableData: [{
                    id: '12987122',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }],
                tableDataLv2: [{
                    id: '12987122',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }],
                activeName: this.$t('order.tableTabs.Single'),
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.$emit("tableSelect", val)

            }
        },
    }
</script>


<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .el-table__expanded-cell[class*=cell] {
        padding: 0 !important;
    }
</style>